<template>
	<view class="content" @click="clickSelf">
		<view class="coverImgContent">
			<view class="coverImg">
				<image class="image" :src="dataInfo.cover" mode="aspectFill"></image>
			</view>
			<view class="coverNum" v-show="sortNumber > -1 ? true : false">
				<view class="coverNum_img">
					<image class="image" src="/static/images/rank_num.png" mode=""></image>
				</view>
				<view class="coverNum_text">{{ sortNumber }}</view>
			</view>
		</view>
		<view class="textContent">
			<view class="textContent_titleContent">
				<view class="textContent_titleContent_title">{{ dataInfo.name }}</view>
				<view class="textContent_titleContent_countContent">
					<view class="textContent_countContent_img">
						<image class="image" src="/static/images/fire.png" mode=""></image>
					</view>
					<view class="textContent_countContent_count">{{ dataInfo.hot_number }}</view>
				</view>
			</view>
			<view class="textContent_des">{{ dataInfo.introduction }}</view>
			<view class="textContent_other">
				<view class="textContent_other_textJi">{{ dataInfo.last_episode_number }}集</view>
				<view class="textContent_other_textGuankan">立即观看</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		props: {
			// 书封面左上角排序号,默认1,如果是-1不显示
			sortNumber: {
				type: Number,
				default: function() {
					return 1
				}
			},
			// 数据信息
			dataInfo: {
				type: Object,
				default:function() {
					return {}
				}
			}
		},
		methods: {
			clickSelf(){
				this.$emit("clickToItem")
			}
		}
	}
</script>

<style lang="scss">
	.content{
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		width: 100%;
		margin-bottom: 15px;
		// background-color: green;
		
		.coverImgContent{
			display: flex;
			box-sizing: border-box;
			
			.coverImg{
				flex-shrink: 0;
				width: 200rpx;
				height: 180rpx;
				.image{
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}
			}
			.coverNum{
				position: absolute;
				width: 40rpx;
				height: 44rpx;
				margin-left: 5px;
				.coverNum_img{
					position: absolute;
					flex-shrink: 0;
					width: 100%;
					height: 100%;
					.image {
						width: 100%;
						height: 100%;
					}
				}
				.coverNum_text{
					position: relative;
					font-size: 13px;
					font-weight: 700;
					color: #ffffff;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		
		.textContent{
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			width: 100%;
			margin-left: 10px;
			
			.textContent_titleContent{
				display: flex;
				box-sizing: border-box;
				justify-content: space-between;
				align-items: center;
				height: 50rpx;
				margin-top: 1px;
				
				.textContent_titleContent_title{
					width: 70%;
					font-size: 15px;
					color: #3D3D3D;
					font-weight: 500;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.textContent_titleContent_countContent{
					display: flex;
					box-sizing: border-box;
					align-items: center;
					.textContent_countContent_img{
						flex-shrink: 0;
						width: 40rpx;
						height: 40rpx;
						.image{
							width: 100%;
							height: 100%;
						}
					}
					.textContent_countContent_count{
						font-size: 13px;
						font-weight: 500;
						color: #DF7C28;
					}
					
				}
			}
			.textContent_des{
				font-size: 13px;
				color: #A5A5A5;
				height: 70rpx;
				margin-top: 5px;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.textContent_other{
				display: flex;
				box-sizing: border-box;
				justify-content: space-between;
				align-items: center;
				margin-top: 5px;
				
				.textContent_other_textJi{
					font-size: 14px;
					color: #3D3D3D;
					
				}
				.textContent_other_textGuankan{
					display: flex;
					box-sizing: border-box;
					font-size: 12px;
					font-weight: 500;
					padding: 5px 10px;
					justify-content: center;
					align-items: center;
					border-radius: 20rpx;
					color: #FFFFFF;
					background-color: #E68B3E;
				}
			}
			
		}
	}
	
</style>